---
import { getCollection, render } from "astro:content";
import Layout from "../../layouts/Layout.astro";

export async function getStaticPaths() {
	const projects = await getCollection("projects");
	return projects.map((project) => ({
		params: { slug: project.id },
		props: { project },
	}));
}

const { project } = Astro.props;
const { Content } = await render(project);
---

<Layout>
	<Fragment slot="left">
		<header class="page-head">
			<img
				src="/kittens.jpg"
				alt="two small orange & white kittens huddled together on a white surface. there is white text overlay over each of the kittens, the first reads 'you are made of stardust', the last reads 'and i am made of dirt'. there is a date stamp in the bottom right corner, it says '04.04.2008'."
			/>
			<div class="title">
				<h1 class="name">{project.data.name}</h1>
			</div>
			<p class="subtitle">
				{project.data.description}
			</p>
		</header>
	</Fragment>

	<Fragment slot="right">
		<article>
			<Content />
		</article>
	</Fragment>
</Layout>